<script setup>

import { onMounted, ref } from 'vue'
import { GetboxInUsers, getBox, boxInUsers, boxInUsersStatus,boxInUsersdel } from '@/api/white/challengeBoxBlacks.js'
import UserInfo from '@/components/UserInfo.vue'
import { showToast } from 'vant'

const whiteList = ref([])
const actions = ref([])
const lastPage = ref(0)
const loading = ref(false)
const page = ref(1)
const total = ref(0)
const refreshing = ref(false)
const showAddDialog = ref(false)
const addId = ref('')
const selectType = ref('选择擂台')
const selectId = ref('')
const selectId1 = ref('')
const showType = ref(false)
const selectType1 = ref('选择类型')
const showType1 = ref(false)
const actions1 = ref([
    { name: 'FIRST赏', type: 1 },
    { name: 'LASTS赏', type: 2 },
    { name: '全局', type: 3 }
])




// watch(
//   type,
//   (newVal) => {
//     if (newVal === '0') {
//       actions.value = [
//         { name: '赠送金币', type: 1 },
//         { name: '代充金币', type: 2 },
//         { name: '优惠卷', type: 3 },
//         { name: '钻石', type: 4 },
//         { name: '反悔卡', type: 5 }
//       ]
//     } else {
//       actions.value = [
//         { name: '金币', type: 1 },
//         { name: '钻石', type: 4 }
//       ]
//     }
//     selectType.value = actions.value[0].name
//     if (newVal === '1' && couponList.value.length) {
//       selectCoupon.value = couponList.value[0].name
//     }
//   },
//   {
//     immediate: true
//   }
// )
onMounted(() => {
    refreshing.value = true
    getWhiteList()
})

const getWhiteList = async () => {
    loading.value = true
    try {
        const result = await GetboxInUsers({
            page: page.value
        })
        if (result.code === 200) {
            if (page.value === 1) {
                whiteList.value = result.data.data
            } else {
                whiteList.value.push(...result.data.data)
            }
            page.value++
            total.value = result.data.total
            lastPage.value = result.data.last_page
        }
    } catch (e) {
        console.log(e)
    } finally {
        refreshing.value = false
        loading.value = false
    }
}

const getBoxs = async () => {
    try {
        const result = await getBox()
        if (result.code === 200) {
            actions.value = result.data.data
            showType.value = true
        }
    } catch (e) {
        console.log(e)
    } finally {
        refreshing.value = false
        loading.value = false
    }
}

const onRefresh = () => {
    refreshing.value = true
    page.value = 1
    lastPage.value = 1
    getWhiteList()
}
const selType = () => {
    getBoxs()
}
const genreType = () => {
    showType1.value = true
}
const onSelect1 = (item) => {
    selectType1.value = item.name
    selectId1.value = item.type
    console.log(selectId1.value)

}
const onSelect = (item) => {
    selectType.value = item.name
    selectId.value = item.id

}

const onLoadMore = () => {
    getWhiteList()
}

const changeStatus = async (item) => {
    item.status = item.status === 1 ? 0 : 1
    const result = await boxInUsersStatus(item.id, {
        status: item.status
    })

    if (result.code === 200) {
        showToast({ type: 'success', message: '修改成功' })
    } else {
        item.status = item.status === 1 ? 0 : 1
        showToast({ type: 'fail', message: '修改失败' })
    }
}
const changeDel = async (item) => {
    console.log("删除")
    const result = await boxInUsersdel(item.id)

    if (result.code === 200) {
        showToast({ type: 'success', message: result.msg })
        onRefresh()
    } else {
        showToast({ type: 'fail', message: result.msg })
    }
}
const addWhite = () => {
    selectType.value = '选择擂台'
    selectType1.value = '选择类型'
    showAddDialog.value = true
}
const handleAdd = async () => {
    const result = await boxInUsers({ user_id: addId.value, image: '', name: '', price: '', sort: '', box_id: selectId.value, type: 3 })
    if (result.code === 200) {
        showToast({ type: 'success', message: '添加成功' })
        addId.value = ''
        onRefresh()
    } else {
        showToast({ type: 'fail', message: result.msg })
    }
}
</script>

<template>
    <div class="white-container">
        <van-button type="primary" @click="addWhite">添加</van-button>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="page > lastPage" finished-text="没有更多了" @load="onLoadMore">
                <div class="white-item" v-for="item in whiteList" :key="item.id">
                    <UserInfo :avatar="item.avatar" :nickname="item.nickname" :id="item.user_id"></UserInfo>
                    <UserInfo :avatar="item.box_image" :nickname="item.box_name"></UserInfo>{{ item.type }}
                    <van-switch @change="changeStatus(item)" :model-value="item.status === 1" />
                    <el-button type="danger" @click="changeDel(item)">删除</el-button>
                </div>
            </van-list>
            <van-back-top bottom="10vh" />
        </van-pull-refresh>
        <van-dialog v-model:show="showAddDialog" title="添加黑名单" show-cancel-button @cancel="showAddDialog = false"
            @confirm="handleAdd">
            <van-field label="用户ID" v-model="addId" placeholder="请输入用户id" input-align="right" type="number" />
            <!-- <van-cell title="擂台" is-link :value="selectType" @click="selType" />
            <van-cell title="类型" is-link :value="selectType1" @click="genreType" /> -->
        </van-dialog>


        <van-action-sheet v-model:show="showType" :actions="actions" @select="onSelect" close-on-click-action
            cancel-text="取消" />
        <van-action-sheet color="#333" v-model:show="showType1" :actions="actions1" @select="onSelect1"
            close-on-click-action cancel-text="取消" />
    </div>
</template>

<style scoped lang="less">
/deep/.van-cell__value {
    color: #333 !important;
}

.white-container {
    .white-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
}
</style>